<template>
	<view class="login">
		<view class="form_box">
			<view class="form_bo_wrap">
				<view class="Editorial">
					<u--form labelPosition="left" :model="model1" :rules="rules" ref="form1">
						<u-form-item label="照片" borderBottom ref="item1" labelWidth="80">
							<u-upload :fileList="fileList1" @afterRead="afterRead" @delete="deletePic" name="1" multiple :maxCount="1"></u-upload>
						</u-form-item>

						<u-form-item label="车牌号" prop="userInfo.carNumber" borderBottom ref="item1" labelWidth="80">
							<u--input v-model="model1.userInfo.carNumber" placeholder="请输入车牌号" border="none"></u--input>
						</u-form-item>

						<u-form-item label="品牌" prop="userInfo.vechiceBrand" borderBottom ref="item1" labelWidth="80">
							<u--input v-model="model1.userInfo.vechiceBrand" placeholder="请输入品牌" border="none"></u--input>
						</u-form-item>

						<u-form-item label="车辆类型" prop="userInfo.vechiceType" borderBottom ref="item1" labelWidth="80">
							<u--input v-model="model1.userInfo.vechiceType" placeholder="请输入车辆类型" border="none"></u--input>
						</u-form-item>

						<u-form-item label="车辆颜色" prop="userInfo.vechiceColor" borderBottom ref="item1" labelWidth="80">
							<u--input v-model="model1.userInfo.vechiceColor" placeholder="请输入车辆颜色" border="none"></u--input>
						</u-form-item>

						<u-form-item label="油量" prop="userInfo.oilVolume" borderBottom ref="item1" labelWidth="80">
							<u--input v-model="model1.userInfo.oilVolume" placeholder="请输入车辆油量" border="none"></u--input>
						</u-form-item>

						<u-form-item label="限载人数" prop="userInfo.maximumOccupant" borderBottom ref="item1" labelWidth="80">
							<u--input v-model="model1.userInfo.maximumOccupant" placeholder="请输入限载人数" border="none"></u--input>
						</u-form-item>

						<u-form-item label="生产年份" borderBottom @click="open(1)" ref="item1" labelWidth="80">
							<u--input v-model="model1.userInfo.productionYear" disabledColor="#ffffff" placeholder="请选择生产年份" border="none"></u--input>
							<u-icon slot="right" name="arrow-right" style="margin-left: 20rpx;"></u-icon>
						</u-form-item>

						<u-form-item label="报废时间" borderBottom @click="open(2)" ref="item1" labelWidth="80">
							<u--input v-model="model1.userInfo.scrapTime" placeholder="请选择报废时间" border="none"></u--input>
							<u-icon slot="right" name="arrow-right" style="margin-left: 20rpx;"></u-icon>
						</u-form-item>

						<u-form-item label="状态" borderBottom @click="showState = true; hideKeyboard()" ref="item1" labelWidth="80">
							<u--input v-model="model1.userInfo.stateName"  disabledColor="#ffffff" placeholder="请选择状态"  border="none"	></u--input>
							<u-icon slot="right" name="arrow-right" style="margin-left: 20rpx;"></u-icon>
						</u-form-item>

					</u--form>
					<u-button type="primary" text="提交" class="submit" v-if="!id" @click="submit(1)"></u-button>
					<u-button type="primary" text="提交" class="submit" v-else @click="submit(2)"></u-button>

					<u-action-sheet
					:show="showState"
					:actions="actions"
					title="请选择状态"
					@close="showState = false"
					@select="sexSelect"
				>
				</u-action-sheet>
				</view>
			</view>
		</view>

		<!-- 日历 -->
		<view>
			<uni-calendar 
			ref="calendar"
			:insert="false"
			@confirm="confirm"
			/>
		</view>

		<!-- <web-view src=" http://3vgphy.natappfree.cc/profile/upload/2025/02/05/科目三路线图_20250205103240A048.doc"></web-view> -->
	</view>
</template>

<script>
import {saveVehicle, queryVehicleDetail, updateVehicle} from '../../common/api'

export default {
	data() {
		return {
			curNow: 0,
			model1: {
				userInfo: {
					carNumber: '', //车牌号
					vechiceBrand: '', //品牌
					vechiceType: '', //车辆类型
					vechiceColor: '', //车辆颜色
					oilVolume: null, //油量
					maximumOccupant: null, //限载人数
					productionYear: '', //生产年份
					scrapTime: '', //报废时间
					state: '', //状态
					stateName: '',
				},
			},
			showState: false,
			actions: [
				{
					name: '可用',
					state: 0
				},
				{
					name: '维修中',
					state: 1
				},
				{
					name: '已预约',
					state: 2
				},
				{
					name: '已考试',
					state: 3
				},
				{
					name: '已停用',
					state: 4
				},
			],
			fileList1: [], //头像
			rules: {
				'userInfo.carNumber': {
					type: 'string',
					required: true,
					message: '请输入车牌号',
					trigger: ['blur', 'change']
				},
			},
			calendarModule: 1, // 日期选择模块
			id: null,
		}
	},
	onLoad(options) {
		console.log(options.id, 1111)
		if(options.id){
			this.id = options.id
			this.getQueryVehicleDetail(options.id)
		}
		
	},
	methods: {
		open(o){
			this.calendarModule = o
			this.$refs.calendar.open();
		},
		confirm(e) {
			if(this.calendarModule == 1){
				this.model1.userInfo.productionYear = e.fulldate
			} else {
				this.model1.userInfo.scrapTime = e.fulldate
			}
			
		},
		// 获取汽车详情
		async getQueryVehicleDetail(id){
			let res = await queryVehicleDetail(id)
			console.log(res, 2222);
			this.model1.userInfo = res
			this.fileList1.push({
				url: res.vehiclePic
			})

			if(res.state == 0){
				this.model1.userInfo.stateName = '可用'
			} else if(res.state == 1){
				this.model1.userInfo.stateName = '维修中'
			} else if(res.state == 2){
				this.model1.userInfo.stateName = '已预约'
			} else if(res.state == 3){
				this.model1.userInfo.stateName = '已考试'
			} else if(res.state == 4){
				this.model1.userInfo.stateName = '已停用'
			}
			this.model1.userInfo.state = res.state
		},
		submit(e) {
			// 如果有错误，会在catch中返回报错信息数组，校验通过则在then中返回true
			if(e == 1){
				this.$refs.form1.validate().then( async res => {
					if(res) {
						let data = await saveVehicle(this.model1.userInfo)
						uni.navigateTo({
							url: '/pages/car/car'
						});
					}
				}).catch(errors => {
					uni.$u.toast('校验失败')
				})
			} else {
				this.$refs.form1.validate().then( async res => {
					if(res) {
						this.model1.userInfo.vehicleId = this.id
						let data = await updateVehicle(this.model1.userInfo)
						uni.navigateTo({
							url: '/pages/car/car'
						});
					}
				}).catch(errors => {
					uni.$u.toast('校验失败')
				})
			}
			
		},
		// 删除图片
		deletePic(event) {
			this[`fileList${event.name}`].splice(event.index, 1)
		},
		// 新增图片
		async afterRead(event) {
			// 当设置 multiple 为 true 时, file 为数组格式，否则为对象格式
			let lists = [].concat(event.file)
			let fileListLen = this[`fileList${event.name}`].length
			lists.map((item) => {
				this[`fileList${event.name}`].push({
					...item,
					status: 'uploading',
					message: '上传中'
				})
			})
			for (let i = 0; i < lists.length; i++) {
				const result = await this.uploadFilePromise(lists[i].url)
				let item = this[`fileList${event.name}`][fileListLen]
				this[`fileList${event.name}`].splice(fileListLen, 1, Object.assign(item, {
					status: 'success',
					message: '',
					url: result
				}))
				fileListLen++
			}
		},
		uploadFilePromise(url) {
			const app = getApp();
			return new Promise((resolve, reject) => {
				let a = uni.uploadFile({
					url: app.globalData.uploadUrl +'font/common/v1/upload', 
					filePath: url,
					name: 'file',
					formData: {
						user: 'test'
					},
					success: (res) => {
						let data = JSON.parse(res.data)
						this.model1.userInfo.vehiclePic = data.url
						setTimeout(() => {
							resolve(res.data.data)
						}, 1000)
					}
				});
			})
		},
		sexSelect(e) {
			console.log(e, 1123444);
			this.model1.userInfo.stateName = e.name
			this.model1.userInfo.state = e.state
		},
		hideKeyboard() {
			uni.hideKeyboard()
		}
	}
}
</script>

<style lang="scss" scoped>
.login {
	.form_box {
		margin: 32rpx;

		.form_bo_wrap {

			.user {
				margin-bottom: 20rpx;
			}
		}
	}

	.enroll {
		font-size: $uni-font-size-mini;
		margin-top: 10rpx;
	}

	.forget {
		font-size: $uni-font-size-mini;
		color: $uni-color-type1;
		text-align: right;
		margin: 20rpx 0 20rpx;
	}

	.submit {
		margin: 32rpx 0 60rpx 0;
	}
}
</style>
